import React from "react";
let Context = React.createContext();
let div1 = React.createRef();
class RefClass extends React.Component {
  state = {
    message: "message",
    parentMessage: "parentMessage",
  };

  handleClick = () => {
    console.log(div1);
  };

  render() {
    return (
      <div>
        {/* 只能传递一个value,如果需要多个值就传入对象 */}
        <Context.Provider value={{ parentMessage: this.state.parentMessage }}>
          <Son></Son>
        </Context.Provider>

        <div ref={div1} onClick={this.handleClick}>我是div1</div>
      </div>
    );
  }
}

class Son extends React.Component {
  state = {
    message: "son",
  };
  render() {
    return (
      <div>
        {this.state.message}

        <ChildrenSon></ChildrenSon>
      </div>
    );
  }
}

class ChildrenSon extends React.Component {
  render() {
    return (
      <div>
        {/* 只能使用Consumer */}
        <Context.Consumer>
          {(value) => {
            console.log(value);
            return <div>{value.parentMessage}</div>;
          }}
        </Context.Consumer>
      </div>
    );
  }
}
function App() {
  return (
    <div>
      <Context.Consumer>
        {(value) => {
          return <div>{value}</div>;
        }}
      </Context.Consumer>
      <RefClass></RefClass>
    </div>
  );
}

export default App;
